<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>原生轮播图</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .banner {
            width: 400px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        
        ul {
            width: 100%;
            height: 100%;
            /* 强制元素不换行 */
            white-space: nowrap;
            font-size: 0;
            transform: translateX(-100%);
        }
        
        li {
            width: 100%;
            height: 100%;
            display: inline-block;
            font-size: 50px;
            text-align: center;
        }
        
        .one {
            background-color: lightgreen;
        }
        
        .two {
            background-color: skyblue;
        }
        
        .three {
            background-color: violet;
        }
        
        .left {
            position: absolute;
            left: 0;
            top: 50%;
        }
        
        .right {
            position: absolute;
            right: 0;
            top: 50%;
        }
    </style>
    <div class="banner">
        <ul>
            <!-- <li class="three">内容3</li> -->
            <li class="one">内容1</li>
            <li class="two">内容2</li>
            <li class="three">内容3</li>
            <!-- <li class="one">内容1</li> -->

        </ul>

        <button class="left">左箭头</button>
        <button class="right">右箭头</button>
    </div>
    <script>
        // let btn_right = document.querySelector('.right');
        // let btn_left = document.querySelector('.left');

        let ul = document.querySelector('ul');
        let index = 1; // 记录点击次数。 index*100%

        let isClick = false;
        let first = ul.children[ul.children.length - 1].cloneNode(true);
        ul.insertBefore(first, ul.children[0])
        let last = ul.children[1].cloneNode(true);
        ul.appendChild(last);
        let l = ul.children.length;

        // ul.addEventListener('transitionend', function() {
        //     isClick = false;
        //     if (index > 3) {
        //         index = 1;
        //         ul.style.transitionDuration = '0s'
        //         ul.style.transform = `translateX(-${index*100}%)`;
        //     };

        //     if (index < 1) {
        //         index = 3;
        //         ul.style.transitionDuration = '0s'
        //         ul.style.transform = `translateX(-${index*100}%)`;
        //     }
        // })

        // btn_right.addEventListener('click', function() {
        //     if (isClick) {
        //         return;
        //     }
        //     index++;
        //     ul.style.transitionDuration = '1s';
        //     ul.style.transform = `translateX(-${index*100}%)`;
        //     isClick = true;

        // });
        // btn_left.addEventListener('click', function() {
        //     if (isClick) {
        //         return;
        //     }
        //     isClick = true;
        //     index--;
        //     ul.style.transitionDuration = '1s'
        //     ul.style.transform = `translateX(-${index*100}%)`;

        // });

        let banner = document.querySelector('.banner')

        ul.addEventListener('transitionend', edge);

        banner.addEventListener('click', move);


        function edge() {
            isClick = false;
            if (index > l - 2) {
                index = 1;
                ul.style.transitionDuration = '0s'
                ul.style.transform = `translateX(-${index*100}%)`;
            }
            if (index == 0) {
                index = l - 2;
                ul.style.transitionDuration = '0s'
                ul.style.transform = `translateX(-${index*100}%)`;
            }
        }

        function move(e) {
            if (e.target.tagName == 'BUTTON') {
                if (e.target.innerHTML == '左箭头') {
                    if (isClick) {
                        return;
                    }
                    isClick = true;
                    index--;
                    ul.style.transitionDuration = '1s'
                    ul.style.transform = `translateX(-${index*100}%)`;

                } else if (e.target.innerHTML == '右箭头') {
                    if (isClick) {
                        return;
                    }
                    index++;
                    ul.style.transitionDuration = '1s';
                    ul.style.transform = `translateX(-${index*100}%)`;
                    isClick = true;

                }
            }
        }
    </script>
</body>

</html>